<template>
  <div class="recommend">
    <div class="title">编辑推荐</div>
    <van-grid
      gutter="-4"
      column-num="3"
      :center="false"
      :border="false"
    >
      <van-grid-item
        v-for="item in playList"
        :key="item.id"
        :to="{ name: 'play-list', params: { id: item.id } }"
      >
        <van-image :src="item.coverImgUrl" />
        <div class="text">{{ item.name }}</div>
        <div class="play-count">
          <van-icon name="service-o" />
          {{ (item.playCount / 10000).toFixed(1) }}万
        </div>
      </van-grid-item>
    </van-grid>
    <div class="title">最新音乐</div>
    <song-list :list="newSongList" />
  </div>
</template>

<script>
import VanGrid from 'vant/lib/grid';
import VanGridItem from 'vant/lib/grid-item';
import VanImage from 'vant/lib/image';
import eventBus from '@/event-bus';

export default {
  components: {
    VanGrid,
    VanGridItem,
    VanImage,
  },
  computed: {
    playList () {
      return eventBus.playList;
    },
    newSongList () {
      return eventBus.newSongList.map(item => ({
        id: item.id,
        name: item.name, // 歌曲名
        maxBr: item.song.privilege.downloadMaxbr, // 最大音质
        alias: item.song.alias[0], // 别名
        artists: item.song.artists, // 歌手数组
        albumName: item.song.album.name, // 专辑名
      }));
    },
  },
  created () {
    eventBus.$emit('updatePlayList');
    eventBus.$emit('updateNewSongList');
  },
}
</script>

<style lang="less" scoped>
@import url('@/assets/base.less');

.title {
  border-left: 3px solid red;
  line-height: 1em;
  padding-left: 8px;
  margin: 16px 0;
  font-size: 18px;
}
.text {
  .text-overflow;
  margin: 4px;
  font-size: 12px;
}
.play-count {
  color: #fff;
  text-shadow: 0px 0px 1px black;
  font-size: 12px;
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 999;
}
</style>